<template>
    <div>
        <el-container class="class-goods">
            <el-aside width="220px" >
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item  title="　　汉服单品" name="1">
                        <el-button>半袖</el-button>
                        <el-button>衣裳</el-button>
                        <el-button>上襦</el-button>
                        <el-button>上袄</el-button>
                        <el-button>褙子</el-button>
                        <el-button>披风</el-button>
                        <el-button>大氅</el-button>
                        <el-button>褶裙</el-button>
                        <el-button>补服</el-button>
                    </el-collapse-item>
                    <el-collapse-item title="　　汉服套装" name="2">
                        <el-button>交领</el-button>
                        <el-button>立领</el-button>
                        <el-button>直裰</el-button>
                        <el-button>直身</el-button>
                        <el-button>袄裙</el-button>
                        <el-button>直裾</el-button>
                        <el-button>曲裾</el-button>
                        <el-button>晋襦</el-button>
                        <el-button>官服</el-button>
                    </el-collapse-item>
                    <el-collapse-item title="　　配饰" name="3">
                        <el-button>披帛</el-button>
                        <el-button>头饰</el-button>
                        <el-button>首饰</el-button>
                        <el-button>颈饰</el-button>
                        <el-button>手饰</el-button>
                        <el-button>革带</el-button>
                        <el-button>腰佩</el-button>
                        <el-button>云肩</el-button>
                        <el-button>鞋靴</el-button>
                    </el-collapse-item>
                    <el-collapse-item title="　　周边" name="4">
                        <el-button>包类</el-button>
                        <el-button>扇子</el-button>
                        <el-button>围脖</el-button>
                        <el-button>流苏</el-button>
                        <el-button>文房</el-button>
                        <el-button>香囊</el-button>
                        <el-button>纸伞</el-button>
                        <el-button>篆刻</el-button>
                        <el-button>抱枕</el-button>
                    </el-collapse-item>
                </el-collapse>
            </el-aside>
            <el-main>
                <GoodsCard
                        v-for='(item) in HotWeek'
                        :key="item.index"
                        :goodsname="item.goodsname"
                        :goodsprice="item.goodsprice"
                        :goodsdiscount="item.goodsdiscount"
                        :goodpic="item.goodsPicturepaths[0].gpPicpath"
                        @click.native="gotoDetails(item)"
                        class="new-goods"
                ></GoodsCard>
            </el-main>
        </el-container>

        <el-container>
            <foot></foot>
        </el-container>
    </div>
</template>


<script>
    import GoodsCard from "../../components/GoodsCard";
    export default {
        data() {
            return {
                activeName: '1',
                ServeUrl:this.$store.state.beginUrl,
                activeIndex: '1',
                activeIndex2: '1',
                roll_img:[],
                ActiveCommodities:[],
                HotWeek:[],
                QualityreCommendation:[],
                FashionCollocation:[],
            };
        },
        mounted(){
            this.$axios.get("/goods/queryshopmain?label=本周热卖").then(ret=>{
                ret.data.forEach(data=>{
                    this.HotWeek.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                })
            });
        },

        methods: {
            handleSelect(key, keyPath) {
            },
            gotoDetails:function(item){
                // console.log(id)
                this.$store.commit('updateshopdetail',item)
                this.$router.push({name:"Details",params:{goods:item}})

            }
        },
        components:{
            "GoodsCard":GoodsCard,
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .el-carousel{
        position: relative;
        width: 75vw;
        margin-left: 10vw;
    }
    .el-container{
        overflow-x: hidden;
    }

    .el-main{
        padding: 0px;
    }
    .el-card__body{
        margin: 0;
        padding: 0;
    }
    .el-card>div:first-child{
        line-height: 30px;
        padding: 0;
        text-align: left;
    }
    .el-header{
        font-weight: 800;
        font-size: 26px;
        background-color: #272727;
        color: white;
        line-height: 2em;
    }

    .active{
        overflow-x: hidden;
    }
    .card{
        margin: 30px 0 30px 0;
    }
    .el-container>.el-container>.el-container>.el-main>.card{
        margin-right: 2vw;
    }
    .el-container>.el-container>.el-container>.el-main{
        margin-left: 5vw;
    }
    .el-container>.el-container>.el-container{
        margin-left: 3vw;
    }
    .new-goods{
        margin-left: 20px;
        box-shadow: 0 0 15px #9e9e9e;
        transition: 0.3s;
    }
    .new-goods:hover{
        transition: 0.3s;
        transform: scale(1.1);
    }

    /deep/.el-button+.el-button{
        margin-left: 0;
    }
    .el-collapse{
        height: 60vh;
        width: 220px;
    }
    .el-aside{
        margin: 30px 0 30px 4vw;
        border-radius: 10px;
    }
    .class-goods{
        margin-left: 8vw;
        width: 80vw;
        background-color: rgba(192, 192, 192, 0.15);
    }
</style>
